<template>
  <div class="home">
    <!-- <div style="width: 600px;height: 450px;background-color:red;">
      <CompareImg :images="images"></CompareImg>
    </div> -->
    <!-- <el-button @click="handleExportPdf">CESHI</el-button>
    <div id="box">
      <el-button>测试</el-button>
      <el-table>
        <el-table-column label="表头1"></el-table-column>
        <el-table-column label="表头2"></el-table-column>
        <el-table-column label="表头3"></el-table-column>
        <el-table-column label="表头4"></el-table-column>
        <el-table-column label="表头5"></el-table-column>
        <el-table-column label="表头6"></el-table-column>
      </el-table>
    </div>
    <el-form>
      <el-form-item label="测试"></el-form-item>
    </el-form> -->
    <MediaDiff :origin="images[0]" :diff="images[1]" style="width: 500px; height: 400px">
    </MediaDiff>
  </div>
</template>

<script>

// import MediaDiff from 'vue-media-diff/src/Component.vue';
import MediaDiff from '../../components/compareImg2/index.vue';
import CompareImg from "../../components/compareImg/index"
export default {
  components: { CompareImg, MediaDiff },
  data() {
    return {
      // images: ['https://ts2.cn.mm.bing.net/th?id=OIP-C.7sAjIeoQYWnXV_QnuYs1jQHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2', 'https://ts3.cn.mm.bing.net/th?id=OIP-C.LH5NQfwpWSFoFF77TCf4JQHaF3&w=280&h=222&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2']
      // images: [require('@/assets/img/1.jpg'), require('@/assets/img/2.jpg')]
      images: [require('@/assets/img/test222.png'), require('@/assets/img/test333.png')]
    };
  },
  watch: {},
  methods: {
    handleExportPdf() {
      // 滚动到顶部，确保打印内容完整
      document.body.scrollTop = 0; // IE的
      document.documentElement.scrollTop = 0; // 其他
      this.htmlToPdf("box", "统计报告");
    }
  },
  created() { },
  mounted() { },
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.home {
  box-sizing: border-box;
  padding: 10px;
  height: 100%;
  // background-color: red;
}
</style>